<template>
	<el-container >
		<el-main class="avoidance">
			<h3>
				本章节对缠中说禅进行自我理解的归纳，<a href="https://chzhshch.blog">原文地址</a>
			</h3>
			<el-collapse  v-model="activeName" class="demo-tabs" accordion>
				<el-collapse-item :title="item.name" :name="item.name" :key="item.name" v-for="(item) in mockData">
					<div v-html="item.content"></div>
				</el-collapse-item>
			</el-collapse>
		</el-main>
	</el-container>
</template>
<script lang="ts" setup>
import { mockData } from './index' 
import { ref } from 'vue'
const activeName = ref('1')
</script>
<style lang="scss" scoped> 
.el-container {
    width: 100%;
    height: 100%;
    padding: 20px;
}
.avoidance {
    width: 100%;
    height: 100%;
    background-color: white;
    border: 1px solid #E4E7ED;
    border-radius: 2px;
    overflow: auto;
}
div {
	white-space: pre-wrap;
	word-break: break-all;
	font-size: 16px;
}
</style>
